<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报</title>
    <style>
        .container{
            margin-top: 30px;
        }
        h2{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>未来七天天气预报</h2>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">日期</th>
                    <th scope="col">天气情况</th>
                    <th scope="col">温度</th>
                    <th scope="col">空气等级</th>
                    <th scope="col">风力</th>
                    <th scope="col">建议</th>
                </tr>
            </thead>
            <tbody class="detail"></tbody>
        </table>
    </div>
</body>
<script id="weather" type="text/html">
    {{each data}}
    <tr>
        <td>{{$value.date}}</td>
        <td>{{$value.wea}}</td>
        <td>最低温度：{{$value.tem2}}<sup>。</sup>,最高温度{{$value.tem1}}<sup>。</sup></td>
        <td>{{$value.win_speed}}</td>
        <td>{{$value.air_level}}</td>
        <td>{{$value.index[0].desc}}</td>
    </tr>
    {{/each}}
</script>
<script src="jquery.js"></script>
<script>
    function req(option){
        var def=$.Deferred();
        if(!option || !option.url){
            throw Error("url is undefined .");
        }
        var _config={
            type:'get',
            dataType:'JSON',
            success:function(res){
                def.resolve(res)            
            },
            error:function(a,b,err){
                def.reject(err)
            }
        };
        $.extend(_config,option,true);
        $.ajax(_config);
        return def.promise();
    }
    //req 调用
    var _option={
        url:'HTTPs://v0.yiketianqi.com/api?version=v9&appid=59394221&appsecret=sec3chco'
    };
    req(option).then(function(weather){//成功时执行的回调函数
        console.log(weather.data)
        var rs={
            data:weather.data
        };
        var txt=template('weather',rs);
        $('.detail').html(txt);
    },function(err){//失败时执行的回调函数
        console.log(err)
    })
</script>
</html>